﻿@page "/diagram/pert-chart"

@using Syncfusion.Blazor.Diagrams
@using System.Collections.ObjectModel

@inherits SampleBaseComponent;

<SampleDescription>
    <p> This sample visualizes a project development process using the Program Evaluation Review Technique (PERT). A complex hierarchical tree layout algorithm is used to automatically arrange the nodes.</p>
    <p style="font-weight: bold;">A new blazor diagram component which provides better performance than the existing diagram control in Blazor WebAssembly App. It is available in preview mode. Check the samples <a target='_blank' href='diagramcomponent/flowchart'>here</a>.</p>
</SampleDescription>
<ActionDescription>
    <p>
        This example shows how to generate a PERT chart from an external data source.
        The <a target='_blank' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_DataSourceSettings'>DataSourceSettings</a> property can be used to map an external data source with the diagram control.
        The <a target='_blank' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_Layout'>Layout</a> property can be used to automatically position the nodes.
        In this example, the nodes are arranged from left to right of the diagram.
        The <a target='_blank' href='https://blazor.syncfusion.com/documentation/diagram/layout/hierarchical-layout/#orientation'>Orientation</a> property can be used to define the orientation of the layouts.
    </p><br>
</ActionDescription>

<div class="control-section">
    <SfDiagram @ref="@Diagram" Height="499px" Layout="@LayoutValue" Tool="@DiagramTools.ZoomPan" ConnectorDefaults="@ConnectorDefault" NodeDefaults="@NodeDefaults">
        <DiagramDataSource Id="Id" ParentId="Category" DataSource="@DataSource">
            <DiagramDataMapSettings>
                <DiagramDataMapSetting Property="annotations[0].content" Field="Id"></DiagramDataMapSetting>
                <DiagramDataMapSetting Property="annotations[1].content" Field="StartDate"></DiagramDataMapSetting>
                <DiagramDataMapSetting Property="annotations[2].content" Field="EndDate"></DiagramDataMapSetting>
                <DiagramDataMapSetting Property="annotations[3].content" Field="Duration"></DiagramDataMapSetting>
            </DiagramDataMapSettings>
        </DiagramDataSource>
        <DiagramSnapSettings Constraints="@SnapConstraints.None"></DiagramSnapSettings>
        <DiagramPageSettings>
            <DiagramFitOptions CanFit="true" Mode="FitModes.Width"></DiagramFitOptions>
        </DiagramPageSettings>
    </SfDiagram>
</div>

@code{
    SfDiagram Diagram;

    DiagramLayout LayoutValue = new DiagramLayout()
    {
        Type = LayoutType.ComplexHierarchicalTree,
        Orientation = LayoutOrientation.LeftToRight,
        VerticalSpacing = 100,
        HorizontalSpacing = 70
    };
    DiagramConnector ConnectorDefault = new DiagramConnector()
    {
        TargetDecorator = new ConnectorTargetDecorator() { Width = 10, Height = 10, Style = new DecoratorShapeStyle() { Fill = "#979797", StrokeColor = "#979797" } },
        Type = Segments.Straight,
        Style = new ConnectorShapeStyle() { StrokeColor = "#979797" },

    };

    DiagramNode NodeDefaults = new DiagramNode
    {
        Width = 170,
        Height = 50,
        Annotations = new ObservableCollection<DiagramNodeAnnotation>()
        {
            new DiagramNodeAnnotation(){Content="", Style= new AnnotationStyle(){ Fill="#0069d9", Color ="white"},Width = 170, Height=25, Constraints= AnnotationConstraints.Interaction, Offset = new NodeAnnotationOffset(){ X=0.500,Y=0.2633} },
            new DiagramNodeAnnotation(){Content="", Style= new AnnotationStyle(){ Fill="white"},Width = 58.933, Height=21 , Constraints= AnnotationConstraints.Interaction, Offset = new NodeAnnotationOffset(){ X=0.2051,Y=0.7605} },
            new DiagramNodeAnnotation(){Content="", Style= new AnnotationStyle(){ Fill="white"},Width = 68.566, Height=21 , Constraints= AnnotationConstraints.Interaction, Offset = new NodeAnnotationOffset(){ X=0.7939,Y=0.7701} },
            new DiagramNodeAnnotation(){Content="", Style= new AnnotationStyle(){ Fill="white"},Width = 25, Height=21 , Constraints= AnnotationConstraints.Interaction, Offset = new NodeAnnotationOffset(){ X=0.5001,Y=0.7733} }
        }
    };

    public class PertChartDetails
    {
        public string Id { get; set; }
        public string Branch { get; set; }
        public string Duration { get; set; }
        public string StartDate { get; set; }
        public string EndDate { get; set; }
        public List<string> Category { get; set; }
    }
    public List<object> DataSource = new List<object>()
    {
        new PertChartDetails(){ Id = "Start Project",Branch="root" ,Duration ="4", StartDate="04/19/2018", EndDate= " 08/19/2018"},
        new PertChartDetails(){ Id = "Design",Category= new List<string>(){"Start Project" } ,Duration ="2", StartDate="08/20/2018", EndDate= "10/20/2018"},
        new PertChartDetails(){ Id = "Formalize Specification",Category=new List<string>(){"Start Project"} ,Duration ="2", StartDate="10/21/2018", EndDate= "12/22/2018"},
        new PertChartDetails(){ Id = "Write Documentation",Category=new List<string>(){"Start Project" },Duration ="1", StartDate="12/23/2018", EndDate= "01/22/2019"},
        new PertChartDetails(){ Id = "Release Prototype",Category=new List<string>(){"Design" },Duration ="1", StartDate="01/23/2019", EndDate= " 02/23/2019"},
        new PertChartDetails(){ Id = "Testing",Category=new List<string>(){"Formalize Specification", "Release Prototype" } ,Duration ="2", StartDate="02/24/2019", EndDate= " 04/22/2019"},
        new PertChartDetails(){ Id = "Release Project",Category=new List<string>(){"Release Prototype" },Duration ="1", StartDate="04/23/2019", EndDate= "05/24/2019"},
        new PertChartDetails(){ Id = "Review Changes",Category=new List<string>(){  "Write Documentation" },Duration ="1", StartDate="05/25/2019", EndDate= " 06/26/2019"},
        new PertChartDetails(){ Id = "Publish Documentation",Category=new List<string>(){"Review Changes" },Duration ="1", StartDate="06/21/2019", EndDate= "07/22/2019"},
        new PertChartDetails(){ Id = "Finish",Category=new List<string>(){"Publish Documentation", "Release Project" } ,Duration ="1", StartDate="07/23/2019", EndDate= "08/24/2019"}
    };

}


